import Taro, { Component } from '@tarojs/taro'
import { Image, Text, View } from '@tarojs/components'
import './index.scss'
import classNames from 'classnames'
import { formatAmount } from '@/utils/utils'
import { toGoodsPage } from '@/utils/page_router'

interface IProps {
  onClose: Function //  取消事件
}

export default class ActivityModal extends Component<IProps, {}> {
  state: any
  props: any

  static options = {
    addGlobalClass: true
  }

  constructor() {
    super(...arguments)
    this.state = {
      isOpened: true
    }
  }

  // componentDidMount () {
  //   setTimeout(() => {
  //     this.setState({
  //       isOpened: true
  //     })
  //   }, 1500)
  // }

  //  取消显示弹窗
  onClose() {
    this.setState({
      isOpened: false
    })
  }

  render() {
    const { isOpened } = this.state
    // @ts-ignore
    return (<View hidden={!isOpened} className={classNames('activity-modal fy-modal__b', isOpened && 'fy-modal--active')} catchtouchmove>
      <View className='mask-class modal-mask' onClick={this.onClose.bind(this)}/>
      <View className='trans-class modal-container'>
        <Image src={`https://ui.aiyichuan.com/xcx_urm/img/home/host-sales_bg.png`} mode='widthFix' className='activity-bg'/>
        <View className='goods-info d-f'>
          <Image src='http://q6.img.aiyichuan.com/urm_huodong/20200714/1594695351566.jpg?imageView2/1/w/400/h/400' className='goods-img'/>
          <View className='other-info d-f f-d-c j-c-b '>
            <Text className='goods-name t-o-e-2'>全网独家，限量首发丨低至99/本，抢上海23家网红公园/乐园畅玩套票（大多数景区儿童免费），含立秀宝/亚马逊萌宠乐园/环球金融中心…有效期至明年！</Text>
            <View className='d-f a-i-b j-c-b'>
              <View className='goods-price bnn-number'>￥{formatAmount(129)}</View>
              <View className='user-like'>29400人喜欢</View>
            </View>
          </View>
        </View>
        <View className='buy-now f-g-5' onClick={() => toGoodsPage('id')}>立即抢购</View>
        <View className='close-btn bnn-icon' onClick={this.onClose.bind(this)}>&#xe659;</View>
      </View>
    </View>)
  }
}
